<template>
	<view class="commentBox-container">
		<view class="commentBox-user">
			<view class="user-logos">
				<image :src="commentData.author.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-content-container">
				<view v-if="isReply" class="user-content-names">
					{{commentData.author.author_name}}
					<text class="user-content-names-reply">回复</text>
					{{commentData.ago}}
				</view>
				<view class="user-content-names" v-else>
					{{commentData.author.author_name}}
				</view>
				<view class="user-content-date">
					{{createTime}}
				</view>
			</view>
		</view>
		<view class="commentBox-content-container">
			<view class="comment-text">
				{{commentData.comment_content}}
			</view>
			<view class="commentBox-reply-contaienr">
				<view class="reply-text" @click="commentReply({comment:commentData,isReply})">
					回复
				</view>
			</view>
			<view class="commentBox-reply-list" v-for="item in commentData.replyArr" :key="item.comment_id">
				<CommentBox :isReply="true" :commentData="item" @commentReply="commentReply">
				</CommentBox>
			</view>
		</view>

	</view>
</template>

<script>
	import SOtime from '@/uni_modules/fl-SOtime/SOtime.js'
	import CommentBox from '@/components/CommentBox/CommentBox.vue'
	export default {
		name: "CommentBox",
		components: {
			CommentBox,
		},
		props: {
			commentData: Object,
			isReply: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			};
		},
		computed: {
			createTime() {
				return SOtime.timestampToDate(this.commentData.create_time)
			}
		},
		methods: {
			//评论回复处理
			commentReply(data) {
				//是否为回复指定用户
				if (data.isReply) {
					data.comment.reply_id = data.comment.comment_id;
					data.comment.comment_id = this.commentData.comment_id
				}

				this.$emit("commentReply", data)
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'css/CommentBox.scss'
</style>
